import React, { Component, Fragment } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import XiaojiejieItem from "./XiaojiejieItem";
import Boss from "./Boss";
import axios from "axios";
import "./style.css";

class Xiaojiejie extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      list: []
    };
  }
  componentWillMount() {
    // console.log('componentWillMount------组件将要挂载到页面的时刻')
  }
  componentDidMount() {
    // console.log('componentDidMount------组件将要挂载到页面的时刻')
    axios
      .get(
        "https://easy-mock.com/mock/5dd3811b7e157d38e7e4107c/react-learn/xjj"
      )
      .then(res => {
        // console.log("axios获取数据成功"+JSON.stringify(res))
        this.setState({
          list: res.data.data
        });
      })
      .catch(error => {
        console.log("axios获取数据失败" + error);
      });
  }
  shouldComponentUpdate(nextProps, nextState) {
    // if(nextProps.content !== this.props.content) return true
    // console.log('1-shouldComponentUpdate')
    // return true
    // return nextProps.content !== this.props.content
    return true;
  }
  componentWillUpdate() {
    // console.log('2-componentWillUpdate')
  }
  componentDidUpdate() {
    // console.log('4-componentWillUpdate')
  }

  render() {
    // console.log('3-render------组件挂载中')
    return (
      // <div>
      <Fragment>
        <label htmlFor="inp">新增服务</label>
        <input
          ref={input => {
            this.input = input;
          }}
          id="inp"
          className="input"
          type="text"
          value={this.state.inputValue}
          onChange={this.inputChange.bind(this)}
        />
        <button onClick={this.addList.bind(this)}>添加服务</button>
        <ul
          ref={ul => {
            this.ul = ul;
          }}
        >
          <TransitionGroup>
            {this.state.list.map((item, index) => {
              return (
                // <li
                //     key={index+item}
                //     onClick={this.deleteItem.bind(this, index)}
                //     dangerouslySetInnerHTML={{__html:item}}
                //     >
                // </li>
                <CSSTransition
                  timeout={2000}
                  classNames="boss-text"
                  unmountOnExit
                  appear={true}
                  key={index + item}
                >
                  <XiaojiejieItem
                    avname="大桥"
                    key={index + item}
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                  />
                </CSSTransition>
              );
            })}
          </TransitionGroup>
        </ul>
        <Boss></Boss>
      </Fragment>
      // </div>
    );
  }
  inputChange(e) {
    this.setState({
      // inputValue: e.target.value
      inputValue: this.input.value
    });
  }
  addList() {
    this.setState(
      {
        list: [...this.state.list, this.state.inputValue],
        inputValue: ""
      },
      () => {
        // console.log(this.ul.querySelectorAll('li').length)
      }
    );
  }
  deleteItem(index) {
    let list = this.state.list;
    list.splice(index, 1);
    this.setState({
      list: list
    });
  }
}
export default Xiaojiejie;
